<template>
    <div class="system-add-role-container">
        <el-dialog title="查看信息详情" v-model="isShowDialog" width="509px">
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">学号：</p></el-col>
                <el-col :span="12"><span>{{detailList.xxzh ? detailList.xxzh : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">姓名：</p></el-col>
                <el-col :span="12"><span>{{detailList.xm ? detailList.xm : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">性别：</p></el-col>
                <el-col :span="12">
                    <span v-if="detailList.xb===1">男</span>
                    <span v-if="detailList.xb===2">女</span>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">学院代码：</p></el-col>
                <el-col :span="12"><span>{{detailList.yxdm ? detailList.yxdm : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">身份证号：</p></el-col>
                <el-col :span="12"><span>{{detailList.sfzh ? detailList.sfzh : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">学历层次：</p></el-col>
                <el-col :span="12">
                    <span v-if="detailList.xlcc === 1">研究生</span>
                    <span v-if="detailList.xlcc === 2">普通本科</span>
                    <span v-if="detailList.xlcc === 3">普通专科</span>
                    <span v-if="detailList.xlcc === 4">成人本科</span>
                    <span v-if="detailList.xlcc === 5">成人专科</span>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">学历类别：</p></el-col>
                <el-col :span="12">
                    <span v-if="detailList.szyx === 1">科研单位</span>
                    <span v-if="detailList.szyx === 2">普通高校</span>
                    <span v-if="detailList.szyx === 3">成人高校</span>
                    <span v-if="detailList.szyx === 4">电视大学</span>
                    <span v-if="detailList.szyx === 5">网络教育</span>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">院系代码：</p></el-col>
                <el-col :span="12"><span>{{detailList.yxdm ? detailList.yxdm : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">拍摄所在届：</p></el-col>
                <el-col :span="12"><span>{{detailList.year ? detailList.year : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">拍摄地区：</p></el-col>
                <el-col :span="12"><span>{{detailList.dqm ? detailList.dqm : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">学校名称：</p></el-col>
                <el-col :span="12"><span>{{detailList.schoolname ? detailList.schoolname : ''}}</span></el-col>
            </el-row>
            <el-row :gutter="20" class="rowgutter">
                <el-col :span="8"><p style="text-align: right">照片下载次数：</p></el-col>
                <el-col :span="12"><span>{{detailList.zpxzcs}}</span></el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {reactive, toRefs} from 'vue';

    export default {
        name: 'systemAddRole',
        setup() {
            const state = reactive({
                isShowDialog: false,
                detailList: [],
            });
            // 打开弹窗
            const openDialog = (row: any) => {
                console.log(row, '11')
                state.detailList = row
                state.isShowDialog = true;
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            return {
                openDialog,
                closeDialog,
                ...toRefs(state),
            };
        },
    };
</script>

<style lang="scss" scoped>
    .demo-ruleForm {
        /*border: 1px solid rgb(238, 240, 245);*/

        ::v-deep .el-form-item {
            height: 23px !important;
            border-bottom: 1px solid rgb(238, 240, 245);
        }

        ::v-deep .el-form-item__content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        ::v-deep * {
            padding: 0 !important;
            margin: 0 !important;
        }

        ::v-deep .el-form-item__content {
            height: 23px !important;
            line-height: 23px !important;
            text-align: left !important;
            /*border-left: 1px solid rgb(238, 240, 245);*/
            padding: 0 10px !important;
        }

        ::v-deep .el-form-item__label {
            height: 23px !important;
            line-height: 23px !important;
            text-align: right !important;
            padding: 0 10px !important;
        }
    }
</style>
<style scoped lang="scss">
    .system-add-role-container {
        .menu-data-tree {
            border: var(--el-input-border, var(--el-border-base));
            border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
            padding: 5px;
        }
    }
    .rowgutter{
        margin:0 auto 10px ;
    }
</style>
